<template>
    <el-dialog
        :title="`已绑定监控列表(${activeDevice.name})`"
        width="800px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        destroy-on-close
        append-to-body
        @close="closeAction"
        :visible="visible"
    >
        <el-button type="green" @click="newAction">
            <i class="iconfont icon-add"></i> 添加
        </el-button>
        <el-table :data="dataList" class="mt-10" style="width: 100%" v-loading="loading">
            <el-table-column prop="cameraNumber" label="监控设备号"></el-table-column>
            <el-table-column prop="cameraName" label="监控名称"></el-table-column>
            <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                    <div class="nowrap">
                        <el-button type="danger" @click="deleteAction(scope.row)">
                            解绑
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="添加摄像头"
            width="800px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
            append-to-body
            :visible.sync="newModalVisible"
            v-if="newModalVisible"
        >
            <el-table
                :data="monitorList"
                class="mt-10"
                style="width: 100%"
                ref="monitorTable"
                v-loading="loading"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="number" label="设备号"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="position" label="位置"></el-table-column>
            </el-table>
            <div class="flex" slot="footer">
                <div class="flex-1 text-left">
                    最多选4个
                </div>
                <el-button type="cancel" @click="newModalVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    :loading="adding"
                    :disabled="monitorSelection.length == 0 || monitorSelection.length > 4"
                    @click="submitAction"
                    >确定</el-button
                >
            </div>
        </el-dialog>
    </el-dialog>
</template>

<script>
import { mapState } from "vuex"
import utils from "@/assets/js/utils"
export default {
    name: "Group",
    components: {},
    props: {
        winH: {
            type: Number,
            default: 500,
        },
        visible: {
            type: Boolean,
        },
        activeDevice: {
            type: Object,
            required: true,
        },
        deviceClassify: {
            type: String,
            required: true,
        },
        business: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            loading: false,
            filterForm: {
                number: "",
                name: "",
                currentstate: "",
            },
            dataList: [],
            newModalVisible: false,
            newModalTitle: "",
            newForm: {},
            adding: false,
            deleting: false,
            monitorList: [],
            monitorSelection: [],
        }
    },
    created() {
        this.getData()
        this.getMonitor()
    },
    methods: {
        monitorSelectable(row, index) {
            const isExist = this.dataList.find((item) => item.cameraNumber == row.number)
            return !isExist
        },
        closeAction() {
            this.$emit("update:visible", false)
        },

        getData() {
            this.loading = true
            this.$get("/fireFightingIOT/device/deviceCameraBindingList", {
                deviceId: this.activeDevice.id,
            }).then(
                (res) => {
                    this.loading = false
                    let data = res.data
                    this.dataList = data
                },
                (err) => {
                    this.loading = false
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        getMonitor() {
            this.loading = true
            this.$get("/fireFightingIOT/device/deviceCameraList", {
                businessId: this.business.id,
            }).then(
                (res) => {
                    this.loading = false
                    let data = res.data
                    this.monitorList = data
                },
                (err) => {
                    this.loading = false
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        handleSelectionChange(val) {
            this.monitorSelection = val
        },
        newAction() {
            const selectedRows = []
            this.monitorList.forEach((item) => {
                const isExist = this.dataList.find((ditem) => ditem.cameraNumber == item.number)
                if (!!isExist) {
                    selectedRows.push(item)
                }
            })

            this.newModalVisible = true
            this.$nextTick(() => {
                selectedRows.forEach((item) => {
                    this.$refs.monitorTable.toggleRowSelection(item, true)
                })
            })
        },
        submitAction() {
            const params = { deviceId: this.activeDevice.id, cameras: [] }
            if (this.monitorSelection.length == 0) {
                this.$message.error("请选择设备")
                return
            }
            params.cameras = this.monitorSelection.map((item) => {
                return { cameraNumber: item.number, cameraName: item.name }
            })
            this.$post("/fireFightingIOT/device/deviceCameraBindingAddOrUpdate", params).then(
                (data) => {
                    this.adding = false
                    this.$message.success("保存成功")
                    this.getData()
                    this.newModalVisible = false
                },
                (error) => {
                    this.adding = false
                    this.$message.error(error.msg)
                }
            )
        },

        deleteAction(item) {
            this.showConfirm("确定解绑该设备吗？", () => {
                this.deleting = true
                this.$post("/fireFightingIOT/device/deviceCameraBindingDel", {
                    deviceId: this.activeDevice.id,
                    cameraNumber: item.cameraNumber,
                }).then(
                    (res) => {
                        this.deleting = false
                        this.$message.success("解绑成功")
                        this.getData()
                    },
                    (err) => {
                        this.deleting = false
                        this.$message.error(err.msg)
                    }
                )
            })
        },
    },
}
</script>
